body {
    /*取消浏览器内间距  外间距*/
    margin: 0;
    padding: 0;
}

.d1 {
    display: block;
    width: 600px;
    height: 400px;
    background-color: skyblue;
}

/*
 position: absolute;
 绝对定位: 元素会文档（HTML）流中脱离,不占据文档空间,后面的元素会往前移位
          位移 相对 父元素 进行的偏离

*/
.d2 {
    display: block;
    width: 300px;
    height: 100px;
    background-color: red;
}

.d3 {
    display: block;
    width: 400px;
    height: 200px;
    background-color: yellow;
    position: absolute; /* 绝对定位*/
    top: 20px; /*跟上面【父容器】 保持20px 间距*/
    left: 50px;
}

.d4 {
    display: block;
    width: 500px;
    height: 100px;
    background-color: chartreuse;
}

/*.d1:hover {*/
/*background-color:black;*/
/*display: none;*/
/*}*/
/*.d2:hover {*/
/*background-color:black;*/
/*display: none;*/
/*}*/
/*.d3:hover {*/
/*background-color:black;*/
/*display: none;*/
/*}*/
/*.d4:hover {*/
/*background-color:black;*/
/*display: none;*/
/*}*/
.d3:hover + .d2 {
    background-color: black;
    /*display: none;*/
}